<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 网络来源的图片 要通过img 标签显示 需要添加mate标签 -->
    <meta name="referrer" content="never" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css" />
    <link rel="stylesheet" href="../css/list.css" />
  </head>
  <body>
    <header>
      <ul>
        <ol>
          <li><a href="">毛萌辉</a></li>
          <li><a href="">手机逛淘宝</a></li>
        </ol>
        <ol>
          <li><a href="./index.html">首页</a></li>
          <li><a href="">我的淘宝</a></li>
          <li><a href="">收藏夹</a></li>
          <li><a href="./list2.html">商品分类</a></li>
        </ol>
      </ul>
    </header>
    <div class="container">
      <ul></ul>
    </div>
    <!-- box 页显示及搜索  -->
    <div class="box m-style"></div>

    <!-- script引入 -->
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../tools/jquery-pagination/jquery.pagination.js"></script>

    <script>
      //默认页 和默认每页显示的商品数
      let page = 1;
      let line = 16;
      //获取浏览器地址栏的数据对象(调用tool里面的函数来获取)
      let obj = myGetUrlValObj();
      console.log(obj); //{id='列表名称'}

      //封装函数 根据得到的地址栏数据 动态渲染生成页面
      setPage();
      function setPage() {
        //发送ajax请求 携带的参数是obj.cat_id
        const xhr = myPromiseJQueryAjax(
          "../server/goods_list.php",
          "get",
          {
            cat_one_id: obj.id,
            page: page,
            line,
          },
          "json"
        );
        console.log(xhr);
        //返回请求解果 动态生成页面
        xhr.then(function (res) {
          console.log(res);
          let str = "";
          //遍历res里面data对象动态获取数据生成页面
          res.data.forEach(function (item) {
            setRGB();
            str += `<li style="border-top:2px solid ${setRGB()}">
          <div class="info_name">
            <a href="#" class="first_name">${item.cat_one_id}</a>
            <a href="#" class="second_name">${item.cat_two_id}</a>
            <a href="#" class="thired_name">${item.cat_three_id}</a>
          </div>
          <a href="./detail2.html?id=${item.goods_id}" class="details">
            <div class="imgBox">
                <img src="${item.goods_big_logo}" alt="..."></div>
            <div class="info">
                 <h3>${item.goods_name}</h3>
            </div>
            <div class="price">
                <span>￥ ${item.goods_price}</span>
            </div>
            <span class="more_like">找相似</span>
          </a>
        </li>`;
          });
          //将str的值写入ul标签
          $(".container ul").html(str);

          //分页插件程序定义在响应体程序中
          $(".box").pagination({
            pageCount: res.sumPage, //总页数
            totalData: res.row, //数据总数量
            current: res.page, //当前第几页
            showData: res.line, //每页数据数量
            prevCls: "prev", // 上一页类名
            nextCls: "next", // 下一页类名
            prevContent: "上一页", // 上一页内容
            nextContent: "下一页", // 下一页内容
            activeCls: "active", // 选中页 class类名
            mode: "fixed", // 显示分页按钮 为 固定模式状态
            count: 4, // 分页按钮 显示的数量 不算 选中页 也就是 设定4 一共显示 5个按钮
            coping: true, // 显示 首页 末页
            homePage: "首页", // 设定首页内容
            endPage: "末页", // 设定末页内容
            isHide: true, // 总页数 为 0 或者 1 隐藏 分页控件
            keepShowPN: true, // 显示 上一页 下一页
            jump: true, // 开启 跳转
            callback: function (result) {
              //获取分页插件点击之后的页数
              //参数.getCurrent();当前页的页码
              console.log(result.getCurrent());
              //将结果赋值给page变量存储
              page = result.getCurrent();
              //根据新的page数据 再次发送请求 动态渲染生成新的页面
              setPage();
              $("html").animate({ scrollTop: 0 });
            },
          });
        });
      }
    </script>
  </body>
</html>
